<template name="evaluateItem">
	<view class="eltItem">
		<view class="userInfo">
			<image :src="evaluateItem.img"></image>
			<text>{{evaluateItem.author}}</text>
		</view>
		<text class="date">{{evaluateItem.createTime}}</text>
		<text class="content">{{evaluateItem.content}}</text>
		<view class="imgList" v-if="evaluateItem.resList.length>0">
			<image v-for="(item,index) in evaluateItem.resList" :src="item.url" :key="index" @tap="showImg(index)"></image>
			
		</view>
		<view class="goodBox" :data-id="evaluateItem.course.id" @tap="toPage" data-url="goodDetail">
			<image :src="evaluateItem.course.img"></image>
			<view class="goodInfo">
				<text class="goodName">{{evaluateItem.course.name}}</text>
				<view class="priceBox">
					<text>全款合计：</text>
					<text class="goodPice">￥{{evaluateItem.course.price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		name: 'evaluateItem', //组件名称
		// 传递参数
		props: {
			evaluateItem: {
				type: Object,
				default:null
			}
		},
		// 组件参数
		data() {
			return {
				
			}
		},
		// 组件方法
		methods: {
			// 查看大图
			showImg(e) {
				let _arr=[];
				this.evaluateItem.resList.forEach((x)=>{
					_arr.push(x.url)
				})
				let _cut=parseInt(e);
				uni.previewImage({
					current:_cut,
					urls:_arr,
					indicator:'default'
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.eltItem {
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 16upx;
		display: flex;
		flex-direction: column;
		padding: 16upx;
		margin-bottom: 20upx;

		.userInfo {
			display: flex;
			align-items: center;

			image {
				width: 70upx;
				height: 70upx;
				margin-right: 16upx;
				border-radius: 50%;
			}

			text {
				font-size: 32upx;
				color: #545454;
			}
		}

		.date {
			font-size: 28upx;
			color: #9a9a9a;
			padding: 0 18upx;
			margin: 20upx 0;
		}

		.content {
			padding: 0 18upx;
			font-size: 32upx;
			color: #545454;
		}

		.imgList {
			width: 100%;
			padding: 10upx 18upx;
			display: flex;
			flex-wrap: wrap;

			image {
				width: 200upx;
				height: 200upx;
				margin: 10upx;
				border-radius: 10upx;
			}

			image:nth-child(3n) {
				margin-right: 0;
			}

			image:nth-child(3n+1) {
				margin-left: 0;
			}

		}

		.goodBox {
			margin-top: 20upx;
			background-color: #f3f3f3;
			display: flex;
			margin: 20upx 18upx;
			padding: 20upx;
			border-radius: 16upx;

			image {
				width: 150upx;
				height: 150upx;
				border-radius: 10upx;
				margin-right: 30upx;
			}

			.goodInfo {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.goodName {
					font-size: 32upx;
					color: #202932;
				}
				.priceBox{
					text{
						font-size: 32upx;
						color: #202932;
					}
					.goodPice{
						font-weight: bold;
						color: #acacac;
					}
				}
			}
		}
	}
</style>
